import React, { useState, useEffect, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import FilterBar from '@/components/FilterBar';
import { CategoryContext } from '@/contexts/CategoryContext';
import HotTabs from '@/components/HotTabs';
import TopFilterBar from '@/components/TopFilterBar';
import MasonryGrid from '@/components/MasonryGrid';
import { Spin } from 'antd';
const filterOptions = {
  分类: ['全部', '海报', '抖音/小红书', '公众号', '电商', 'PPT/办公', '印刷物料', 'H5', '社交生活', '视频', '插画元素'],
  场景: ['全部', '种草', '测评', '教程'],
  用途: ['全部', '内容分享', '品牌推广'],
  行业: ['全部', '美妆', '旅游', '健身'],
};

const routeMap: Record<string, string> = {
  '全部': '/template/all',
  '海报': '/template/poster',
  '抖音/小红书': '/template/douyin',
  '公众号': '/template/mp',
  '电商': '/template/ecom',
  'PPT/办公': '/template/ppt',
  '印刷物料': '/template/print',
  'H5': '/template/h5',
  '社交生活': '/template/social',
  '视频': '/template/video',
  '插画元素': '/template/element',
};
const items = [
  { id: 1, img: 'https://ts1.tc.mm.bing.net/th/id/OIF-C.0dHxIoXe7TeSnV8TdwLhbg?rs=1&pid=ImgDetMain&o=7&rm=3' },
  { id: 2, img: 'https://ts1.tc.mm.bing.net/th/id/OIF-C.0dHxIoXe7TeSnV8TdwLhbg?rs=1&pid=ImgDetMain&o=7&rm=3' },
  { id: 3, img: 'https://img95.699pic.com/photo/50464/9776.jpg_wh860.jpg' },
  { id: 4, img: 'https://img.shetu66.com/2023/04/25/1682391094827084.png' },
  { id: 5, img: 'https://ts1.tc.mm.bing.net/th/id/OIF-C.0dHxIoXe7TeSnV8TdwLhbg?rs=1&pid=ImgDetMain&o=7&rm=3' },
  { id: 6, img: 'https://pic1.zhimg.com/v2-02760a1bf058904006740d3f66b2c9ac_r.jpg?source=1940ef5c' },
  { id: 7, img: 'https://cdn.pixabay.com/photo/2016/05/12/19/12/green-1388408_1280.jpg' },
  { id: 8, img: 'https://cdn.pixabay.com/photo/2016/05/12/19/12/green-1388408_1280.jpg' },
  { id: 9, img: 'https://img95.699pic.com/photo/40244/2615.jpg_wh860.jpg' },
  { id: 10, img: 'https://cdn.pixabay.com/photo/2022/01/13/00/05/austria-6934162_1280.jpg' },
  { id: 11, img: 'https://img95.699pic.com/photo/50464/9776.jpg_wh860.jpg' },
  { id: 12, img: 'https://img.shetu66.com/2023/04/25/1682391094827084.png' },
  { id: 13, img: 'https://cdn.pixabay.com/photo/2023/05/07/09/59/mountains-7976041_1280.jpg' },
  { id: 14, img: 'https://pic1.zhimg.com/v2-02760a1bf058904006740d3f66b2c9ac_r.jpg?source=1940ef5c' },
  { id: 15, img: 'https://ts2.tc.mm.bing.net/th/id/OIF-C.W0ATWBPEld6cm6hBVSTv9A?w=853&h=1280&rs=1&pid=ImgDetMain&o=7&rm=3' },
  { id: 16, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.2dfdaed9d3e59f8e20462202ec847723?rik=J06C3PjIKrv2gg&riu=http%3a%2f%2fup.deskcity.org%2fpic%2f202010%2fdt%2fqcyrevgybb31914.jpg&ehk=YrflT4NTtOIFDL7cWfvPYExD3esBhvVDT4en8CPqbx4%3d&risl=&pid=ImgRaw&r=0' },
  { id: 17, img: 'https://img95.699pic.com/photo/40244/2615.jpg_wh860.jpg' },
  { id: 18, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.38af5ad8ab346af427b153d721520142?rik=gLiTZEnPSLSISA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50046%2f8376.jpg_wh1200.jpg&ehk=LsCdU06fVg4LvmT4HcON8D5xLn80v1CsIEQdL3WUTWM%3d&risl=&pid=ImgRaw&r=0' },
  { id: 19, img: 'https://img95.699pic.com/photo/50464/9776.jpg_wh860.jpg' },
  { id: 20, img: 'https://img.shetu66.com/2023/04/25/1682391094827084.png' },
  { id: 21, img: 'https://img95.699pic.com/photo/40244/2615.jpg_wh860.jpg' },
  { id: 22, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.38af5ad8ab346af427b153d721520142?rik=gLiTZEnPSLSISA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50046%2f8376.jpg_wh1200.jpg&ehk=LsCdU06fVg4LvmT4HcON8D5xLn80v1CsIEQdL3WUTWM%3d&risl=&pid=ImgRaw&r=0' },
  { id: 23, img: 'https://img95.699pic.com/photo/50464/9776.jpg_wh860.jpg' },
  { id: 24, img: 'https://img.shetu66.com/2023/04/25/1682391094827084.png' },
  { id: 25, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.a8553f142638e741396e386b43c2bca7?rik=dzSGk6XRsxAAsQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50062%2f5890.jpg_wh1200.jpg&ehk=BgxiqxvzoNQd0pZHWV4VPOMbYgqM76WDMt8RDzCjoYY%3d&risl=&pid=ImgRaw&r=0' },
  { id: 26, img: 'https://pic1.zhimg.com/v2-02760a1bf058904006740d3f66b2c9ac_r.jpg?source=1940ef5c' },
  { id: 27, img: 'https://ts2.tc.mm.bing.net/th/id/OIF-C.W0ATWBPEld6cm6hBVSTv9A?w=853&h=1280&rs=1&pid=ImgDetMain&o=7&rm=3' },
  { id: 28, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.2dfdaed9d3e59f8e20462202ec847723?rik=J06C3PjIKrv2gg&riu=http%3a%2f%2fup.deskcity.org%2fpic%2f202010%2fdt%2fqcyrevgybb31914.jpg&ehk=YrflT4NTtOIFDL7cWfvPYExD3esBhvVDT4en8CPqbx4%3d&risl=&pid=ImgRaw&r=0' },
  { id: 29, img: 'https://img95.699pic.com/photo/40244/2615.jpg_wh860.jpg' },
  { id: 30, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.38af5ad8ab346af427b153d721520142?rik=gLiTZEnPSLSISA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50046%2f8376.jpg_wh1200.jpg&ehk=LsCdU06fVg4LvmT4HcON8D5xLn80v1CsIEQdL3WUTWM%3d&risl=&pid=ImgRaw&r=0' },
  { id: 31, img: 'https://img95.699pic.com/photo/50464/9776.jpg_wh860.jpg' },
  { id: 32, img: 'https://img.shetu66.com/2023/04/25/1682391094827084.png' },
  { id: 33, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.a8553f142638e741396e386b43c2bca7?rik=dzSGk6XRsxAAsQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50062%2f5890.jpg_wh1200.jpg&ehk=BgxiqxvzoNQd0pZHWV4VPOMbYgqM76WDMt8RDzCjoYY%3d&risl=&pid=ImgRaw&r=0' },
  { id: 34, img: 'https://pic1.zhimg.com/v2-02760a1bf058904006740d3f66b2c9ac_r.jpg?source=1940ef5c' },
  { id: 35, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.2a49d9f3677d83a9a2d8849f1442bb22?rik=DpSAj9AUyR4RrA&riu=http%3a%2f%2ffile.51pptmoban.com%2fd%2ffile%2f2023%2f06%2f04%2fb3925630992729172938c08655e5cfd0.jpg&ehk=avAdUGiVQ52VCb2qjEv6sors6E%2bzLS0DO4tv4hnl6aw%3d&risl=&pid=ImgRaw&r=0' },
  { id: 36, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.2dfdaed9d3e59f8e20462202ec847723?rik=J06C3PjIKrv2gg&riu=http%3a%2f%2fup.deskcity.org%2fpic%2f202010%2fdt%2fqcyrevgybb31914.jpg&ehk=YrflT4NTtOIFDL7cWfvPYExD3esBhvVDT4en8CPqbx4%3d&risl=&pid=ImgRaw&r=0' },
  { id: 37, img: 'https://img95.699pic.com/photo/40244/2615.jpg_wh860.jpg' },
  { id: 38, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.38af5ad8ab346af427b153d721520142?rik=gLiTZEnPSLSISA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50046%2f8376.jpg_wh1200.jpg&ehk=LsCdU06fVg4LvmT4HcON8D5xLn80v1CsIEQdL3WUTWM%3d&risl=&pid=ImgRaw&r=0' },
  { id: 39, img: 'https://img95.699pic.com/photo/50464/9776.jpg_wh860.jpg' },
  { id: 40, img: 'https://img.shetu66.com/2023/04/25/1682391094827084.png' },
  { id: 41, img: 'https://img95.699pic.com/photo/50464/9776.jpg_wh860.jpg' },
  { id: 42, img: 'https://img.shetu66.com/2023/04/25/1682391094827084.png' },
  { id: 43, img: 'https://ts2.tc.mm.bing.net/th/id/OIF-C.W0ATWBPEld6cm6hBVSTv9A?w=853&h=1280&rs=1&pid=ImgDetMain&o=7&rm=3' },
  { id: 44, img: 'https://pic1.zhimg.com/v2-02760a1bf058904006740d3f66b2c9ac_r.jpg?source=1940ef5c' },
  { id: 45, img: 'https://ts2.tc.mm.bing.net/th/id/OIF-C.W0ATWBPEld6cm6hBVSTv9A?w=853&h=1280&rs=1&pid=ImgDetMain&o=7&rm=3' },
  { id: 46, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.2dfdaed9d3e59f8e20462202ec847723?rik=J06C3PjIKrv2gg&riu=http%3a%2f%2fup.deskcity.org%2fpic%2f202010%2fdt%2fqcyrevgybb31914.jpg&ehk=YrflT4NTtOIFDL7cWfvPYExD3esBhvVDT4en8CPqbx4%3d&risl=&pid=ImgRaw&r=0' },
  { id: 47, img: 'https://img95.699pic.com/photo/40244/2615.jpg_wh860.jpg' },
  { id: 48, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.38af5ad8ab346af427b153d721520142?rik=gLiTZEnPSLSISA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50046%2f8376.jpg_wh1200.jpg&ehk=LsCdU06fVg4LvmT4HcON8D5xLn80v1CsIEQdL3WUTWM%3d&risl=&pid=ImgRaw&r=0' },
  { id: 49, img: 'https://img95.699pic.com/photo/50464/9776.jpg_wh860.jpg' },
  { id: 50, img: 'https://img.shetu66.com/2023/04/25/1682391094827084.png' },
  { id: 51, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.38af5ad8ab346af427b153d721520142?rik=gLiTZEnPSLSISA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50046%2f8376.jpg_wh1200.jpg&ehk=LsCdU06fVg4LvmT4HcON8D5xLn80v1CsIEQdL3WUTWM%3d&risl=&pid=ImgRaw&r=0' },
  { id: 52, img: 'https://img95.699pic.com/photo/50464/9776.jpg_wh860.jpg' },
  { id: 53, img: 'https://img.shetu66.com/2023/04/25/1682391094827084.png' },
  { id: 54, img: 'https://img95.699pic.com/photo/40244/2615.jpg_wh860.jpg' },
  { id: 55, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.38af5ad8ab346af427b153d721520142?rik=gLiTZEnPSLSISA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50046%2f8376.jpg_wh1200.jpg&ehk=LsCdU06fVg4LvmT4HcON8D5xLn80v1CsIEQdL3WUTWM%3d&risl=&pid=ImgRaw&r=0' },
  { id: 56, img: 'https://img95.699pic.com/photo/50464/9776.jpg_wh860.jpg' },
  { id: 57, img: 'https://img.shetu66.com/2023/04/25/1682391094827084.png' },
  { id: 58, img: 'https://ts1.tc.mm.bing.net/th/id/R-C.a8553f142638e741396e386b43c2bca7?rik=dzSGk6XRsxAAsQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50062%2f5890.jpg_wh1200.jpg&ehk=BgxiqxvzoNQd0pZHWV4VPOMbYgqM76WDMt8RDzCjoYY%3d&risl=&pid=ImgRaw&r=0' },
  { id: 59, img: 'https://pic1.zhimg.com/v2-02760a1bf058904006740d3f66b2c9ac_r.jpg?source=1940ef5c' },
  { id: 60, img: 'https://ts1.tc.mm.bing.net/th/id/OIF-C.0dHxIoXe7TeSnV8TdwLhbg?rs=1&pid=ImgDetMain&o=7&rm=3' },
  { id: 61, img: 'https://ts1.tc.mm.bing.net/th/id/OIF-C.0dHxIoXe7TeSnV8TdwLhbg?rs=1&pid=ImgDetMain&o=7&rm=3' },
  { id: 62, img: 'https://ts1.tc.mm.bing.net/th/id/OIF-C.0dHxIoXe7TeSnV8TdwLhbg?rs=1&pid=ImgDetMain&o=7&rm=3' },
];
export default function TemplateDouyin() {
  // const location = useLocation();
  const navigate = useNavigate();
  const { currentCategory, setCurrentCategory } = useContext(CategoryContext);
  const [selected, setSelected] = useState({ 分类: currentCategory, 场景: '全部', 用途: '全部', 行业: '全部' });
  const [tab, setTab] = useState('hot');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setSelected(s => ({ ...s, 分类: currentCategory }));
    setLoading(true);
    const timer = setTimeout(() => setLoading(false), 800);
    return () => clearTimeout(timer);
  }, [currentCategory]);

  const handleFilterSelect = (group: string, item: string) => {
    if (group === '分类') {
      setCurrentCategory(item);
      setSelected(s => ({ ...s, 分类: item }));
      navigate(routeMap[item]);
    } else {
      setSelected(prev => ({ ...prev, [group]: item }));
    }
  };

  return (
    <div>
      <FilterBar options={filterOptions} selected={selected} onSelect={handleFilterSelect} />
      {/* 下面是模板内容 */}
      <div style={{ display: 'flex' }}>
        <HotTabs value={tab} onChange={setTab} />
        <div style={{ marginLeft: '20px' }}><TopFilterBar/></div>
      </div>
      <div style={{ minHeight: 400, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {loading ? <Spin size="large" /> : <MasonryGrid items={items} columns={6} cardHeight={340} />}
      </div>
    </div>
  );
} 